<template>
  <view class="classlist">
    <!-- 中间展示内容，可以点击跳转到小说详情界面 -->
    <view class="content">
      <navigator :url="'/pages/book/book?novelId='+item.novelId" class="item" 
                 v-for="item in classList"
                 :key="item.novelId">
        <!-- 展示小说的图片位置 -->
        <image :src="`${BASE_URL}${item.coverImage}`" mode="aspectFill"></image>
        <!-- 修改：增加一个name，可以展示小说的名字 -->
        <view class="name">{{ item.title }}</view>
      </navigator>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad,onUnload,onReachBottom,onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"

import {apiGetCollection} from "@/api/apis.js"
import {gotoHome} from "@/utils/common.js"

import { BASE_URL } from '../../utils/request';
//分类列表数据
const classList = ref([]);
// const noData = ref(false)

//可以直接获取上个分类的id
onLoad((e)=>{  
  //执行获取分类列表方法
  getClassList();
})

//获取分类列表网络数据
const getClassList = async ()=>{
  const res = await apiGetCollection();
  classList.value = res.data;
} 

</script>

<style lang="scss" scoped>
.classlist {
  .header {
    text-align: center;
    font-family: 'Microsoft YaHei', sans-serif; /* 设置字体为微软雅黑 */
    font-weight: bold; /* 设置字体加粗 */
    font-size: 36rpx; /* 自定义字体大小 */
    padding: 20rpx 0;
    color: #333;
  }
  .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5rpx;
    padding: 5rpx;
    .item {
      height: 560rpx;
      width: 370rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      image {
        width: 160px;
        height: 220px;
        display: block;
        border-radius: 20px;
      }
      .name {
        margin-top: 10rpx;
        font-size: 28rpx;
        text-align: center;
        color: #333;
      }
    }
  }
}
</style>
